<template>
  <section
    v-for="(item, index) in options1"
    :key="index"
    class="card max-w-vw md:max-w-full mb-[40px]"
    id=""
  >
    <h1 class="mb-[16px] flex items-center justify-between">
      <span
        class="text-[20px]/[24px] font-bold md:text-[26px]/[32px] md:font-semibold"
        ><font style="vertical-align: inherit"
          ><font style="vertical-align: inherit">{{ item.title }}</font></font
        ></span
      ><p
        @click="onClickAll(item)"
        class="cursor-pointer text-[14px] font-normal text-[#0B051D] underline md:text-base md:hover:no-underline"
        ><font style="vertical-align: inherit">See all</font>
      </p>
    </h1>
    <div
      class="flex gap-x-3 gap-y-4 overflow-x-scroll scrollbar-hide md:justify-between md:gap-[12px] md:overflow-auto"
    >
      <p
        v-for="(item2, index2) in item.children"
        :key="index2 + 'item'"
        class="group relative flex w-[calc(50vw-22px)] shrink-0 cursor-pointer flex-col gap-[12px] md:w-auto md:max-w-[218px] md:flex-1"
        @click="onClick(item2)"
        ><div class="flex aspect-square items-center justify-center">
          <div
            class="aspect-square w-9/12 duration-200 ease-in-out group-hover:scale-105"
          >
            <img
              class="h-full max-h-full w-full max-w-full object-contain"
              loading="lazy"
              src="https://img.1weeklyads.com/ccsimg/dcs/img_tools/dcs_img_1703712698_af7d7e8cbecdede7edb3142e9e773f4d.webp"
              :alt="item2.title"
            />
          </div>
          <div
            class="absolute left-0 right-0 top-0 aspect-square rounded-2xl bg-[#333536] opacity-5"
          ></div>
        </div>
        <p
          class="line-clamp-2 h-[40px] px-[8px] text-[15px]/[20px] font-normal"
        >
          <font style="vertical-align: inherit">{{ item2.title }}</font>
        </p>
        <p class="line-clamp-1 px-[8px] text-base font-bold">
          <font style="vertical-align: inherit">30</font>
        </p>
        <p class="px-[8px] text-[14px]/[20px] font-normal">
          <font style="vertical-align: inherit">在</font>
          <font style="vertical-align: inherit">{{
            item2.quantityProduct
          }}</font>
          <font style="vertical-align: inherit">家商店进行比较</font>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            data-icon="arrow"
            class="ml-[4px] inline-block"
          >
            <path
              d="M9.43408 6.4149L6.30508 3.28589L7.13003 2.46094L11.6673 6.99823L7.13003 11.5355L6.30508 10.7105L9.43408 7.58157H2.33398V6.4149H9.43408Z"
              fill="black"
              class="w-[12px] h-[12px] md:h-[14px] md:w-[14px]"
            ></path>
          </svg>
        </p>
      </p>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import EventBus from "@/plugins/Bus";
import { getHomeProductDisplayList } from "@/apis/index";
const router = useRouter();
const options1 = ref([]);
onMounted(() => {
  getData();
});
const getData = async () => {
  let res = await getHomeProductDisplayList();
  if (res.data.code == 200) {
    options1.value = res.data.data;
  }
};

//查看全部
const onClickAll = async (item) => {
  window.scrollTo(0, 0); // 滚动到页面顶部
  //typy 1 标识查看全部 2代表搜索名称
  router.push({
    path: "/more",
    query: { type: "1", categoryId: item.categoryId, pageSize: 1, pageNum: 1,title:item.title },
  });
};
//查看详情
const onClick = (item) => {
  router.push({
    path: "/home",
  });
};
</script>